<template>
  <div class="news-center">
    <h2>新闻中心</h2>
    <div class="main-divider"></div>
    <ul class="news-list">
      <li v-for="item in newsList" :key="item.id" class="news-item" @click="handleNewsClick(item.id)">
        <span class="news-title">{{ item.title }}</span>
        <span class="news-date">{{ item.date }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'newsCenter',
  data() {
    return {
      newsList: [
        { title: '【打卡】平阳坡瑶漂欢乐谷1日游', date: '2023-12-04', id: '24-1' },
        { title: '乔迁新址，砥砺前行，我们搬新家啦！', date: '2022-02-21', id: '24-2' },
        { title: '防疫工作常态化，筑牢生命至上的细胞风景线', date: '2022-02-18', id: '24-3' },
        { title: '2022年新春人才储备计划发布啦', date: '2022-02-17', id: '24-4' },
        { title: '佳博元旦横店二日游', date: '2019-01-01', id: '24-5' },
        { title: '2018年第一季度启动大会', date: '2018-01-06', id: '24-6' },
        { title: '第4季度销售启动会隆重开幕', date: '2017-10-10', id: '24-7' },
        { title: '一次不一样的烧烤 警民共谱鱼水情', date: '2017-08-06', id: '24-8' },
        { title: '元旦渔寮出海集体游', date: '2017-01-01', id: '24-9' },
        { title: '销售中心第3季度销售启动会隆重开幕', date: '2017-07-08', id: '24-10' },
        { title: '佳博全体员工开展逃生自救及消防灭火技能演练', date: '2017-07-05', id: '24-11' },
        { title: '6.26国际禁毒日 政企联合普法主题宣传活动', date: '2017-06-26', id: '24-12' },
        { title: '销售中心第2季度销售启动会议', date: '2022-02-18', id: '24-13' },
        { title: '佳博携手的哥102城顺计划显风采', date: '2022-02-18', id: '24-14' },
        { title: '冲锋号角声声响 哨师大会扬风帆', date: '2017-01-07', id: '24-15' },
        { title: '销售部实验中心正式投入使用', date: '2016-08-17', id: '24-16' },
        { title: '公司新样品室正式投入使用', date: '2016-08-17', id: '24-17' }
      ]
    }
  },
  methods: {
    handleNewsClick(id) {
      this.$router.push(`/news/${id}`)
    }
  }
}
</script>

<style scoped>
.news-center {
  padding: 0 10px;
}

h2 {
  color: #1b4e54;
  margin-bottom: 0;
  font-size: 24px;
  font-weight: bold;
  border-left: 4px solid #1b4e54;
  padding-left: 12px;
  letter-spacing: 1px;
}

.main-divider {
  height: 2px;
  background: #e5e5e5;
  margin: 14px 0 28px 0;
  border: none;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 16px;
  transition: background 0.2s;
}

.news-item:hover {
  background: #f8f8f8;
}

.news-title {
  color: #1b4e54;
  font-size: 15px;
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-date {
  color: #999;
  font-size: 14px;
  min-width: 90px;
  text-align: right;
  margin-left: 20px;
}

@media (max-width: 768px) {
  h2 {
    font-size: 20px;
    padding-left: 10px;
  }

  .main-divider {
    margin: 12px 0 20px 0;
  }

  .news-item {
    font-size: 15px;
    padding: 8px 0;
  }

  .news-title {
    font-size: 14px;
  }

  .news-date {
    font-size: 13px;
    min-width: 70px;
  }
}

@media (max-width: 480px) {
  h2 {
    font-size: 18px;
    padding-left: 8px;
  }

  .main-divider {
    margin: 10px 0 15px 0;
  }

  .news-item {
    font-size: 14px;
    padding: 6px 0;
  }

  .news-title {
    font-size: 13px;
  }

  .news-date {
    font-size: 12px;
    min-width: 60px;
  }
}
</style>